<script setup lang="ts">
import type { OrderInfo } from "@/types/userTypes.d.ts";

withDefaults(defineProps<{
    orderInfo: OrderInfo
}>(), {
    orderInfo: () => (<OrderInfo>{}),
});

</script>

<template>
    <div class="order-crad">
        <div class="head">
            <h3>药品订单</h3>
            <router-link to="/consultRecord">
                <span>全部订单</span>
                <van-icon name="arrow" />
            </router-link>
        </div>
        <van-row>
            <van-col span="6">
                <van-badge :content="orderInfo.paidNumber">
                    <svg-icon svg-name="paid" width="38px" height="38px" />
                    <p>待付款</p>
                </van-badge>
            </van-col>
            <van-col span="6">
                <van-badge :content="orderInfo.receivedNumber">
                    <svg-icon svg-name="shipped" width="38px" height="38px" />
                    <p>待发货</p>
                </van-badge>
            </van-col>
            <van-col span="6">
                <van-badge :content="orderInfo.shippedNumber">
                    <svg-icon svg-name="received" width="38px" height="38px" />
                    <p>待收货</p>
                </van-badge>
            </van-col>
            <van-col span="6">
                <van-badge :content="orderInfo.finishedNumber">
                    <svg-icon svg-name="finished" width="38px" height="38px" />
                    <p>已完成</p>
                </van-badge>
            </van-col>
        </van-row>
    </div>
</template>

<style scoped lang="scss">
.order-crad {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    padding-bottom: 10px;

    .head {
        display: flex;
        justify-content: space-between;
        line-height: 50px;
        padding: 0 15px;

        a {
            color: var(--cp-tip);
        }
    }

    .van-col {
        text-align: center;


        p {
            font-size: 12px;
            padding-top: 4px;
        }
    }
}
</style>
